<template>
  <section class="d-flex justify-content-between align-items-center">
    <div class="back" @click.stop="toBack">
      <i class="cubeic-back"></i>
    </div>
    <ul class="d-flex">
      <!-- <li>
        <i class="iconfont icon-shoucang1"></i>
      </li>
      <li>
        <i class="iconfont icon-fenxiang1"></i>
      </li> -->
      <router-link to="/list/shelf" tag="li">
        <i class="iconfont icon-shelf"></i>
      </router-link>
      <router-link :to="'/books/detail/' + bookId" tag="li">
        <i class="iconfont icon-xiangqing_icon"></i>
      </router-link>
    </ul>
  </section>
</template>

<script>
export default {
  name: 'ReaderHead',
  props: {
    bookId: String
  },
  methods: {
    toBack () {
      this.$router.back(-1);
    },
  },
  created () {
    //判断是否已经收藏
  }
}
</script>

<style lang="stylus" scoped>
section {
  height $toolbar-height
  background #000
  color #FFF
  padding 0 3vw
  position fixed
  top 0
  left 0
  width 94vw
  z-index 9999

  li {
    margin-right 15px
    &:last-of-type {
      margin-right 0
    }

    i {
      font-size 22px!important
    }
  }
}
</style>
